<template>
  <div class="row">
    <div class="col-xs-12 col-md-8 offset-md-2">
      <form class="card comment-form" @submit.prevent="addComment" v-if="this.user">
        <div class="card-block">
          <textarea
            v-model="commentBody"
            class="form-control"
            placeholder="Write a comment..."
            rows="3"
            required
          ></textarea>
        </div>
        <div class="card-footer">
          <user-image :src="user? user.image : ''" class="comment-author-img" />
          <button class="btn btn-sm btn-primary">Post Comment</button>
        </div>
      </form>

      <div class="card" v-for="comment in comments" :key="comment.id">
        <div class="card-block">
          <p class="card-text">{{comment.body}}</p>
        </div>
        <div class="card-footer">
          <nuxt-link :to="`/profile/${comment.author.username}`" class="comment-author">
            <img :src="comment.author.image" class="comment-author-img" />
          </nuxt-link>&nbsp;
          <nuxt-link
            :to="`/profile/${comment.author.username}`"
            class="comment-author"
          >{{comment.author.username}}</nuxt-link>
          <span class="date-posted">{{comment.createdAt | format('MMMM DD, YYYY')}}</span>
          <span class="mod-options" v-if="comment.author.username === article.author.username">
            <!--<i class="ion-edit"></i>-->
            <i class="ion-trash-a" @click="deleteComment(comment.id)"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import UserImage from '@/pages/components/userImage.vue'
export default {
  name: 'ArticleComments',
  components: { UserImage },
  data() {
    return {
      commentBody: '',
    }
  },
  props: {
    comments: {
      type: Array,
      default: () => [],
    },
    article: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    addComment() {
      if (!this.commentBody) return
      this.$emit('add-comment', this.commentBody)
    },
    deleteComment(id) {
      this.$emit('delete-comment', id)
    },
  },
}
</script>